<template>
  <div class="poster">
    <div class="share-tip">
      <ul>
        <li>点击右上角分享专属链接给好友</li>
        <li>您可复制链接或长按海报分享给好友</li>
      </ul>
      <van-button plain color="#fe9100" size="small" v-clipboard:copy="copyLink" v-clipboard:success="copySuccess" v-clipboard:error="copyError">复制链接</van-button>
    </div>
    <div class="swiper-container" ref="swiperBox">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="(item, index) in swiperList" :key="index">
          <img v-show="item.canvasImg" class="canvas_img" :src="item.canvasImg" />
          <div class="poster_wrapper" v-show="!item.canvasImg">
            <img :src="item.bgImg" class="bg-img" alt="" />
            <div class="qr-code-container" v-show="qrcode">
              <img class="qr-code" :src="qrcode" alt="" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <vue-qr class="qrCode" :text="copyLink" :margin="5" v-show="false"></vue-qr>
    <img class="base64" :src="base64" alt="" v-show="false" />
  </div>
</template>

<script>
import Swiper from '@assets/js/swiper-3.4.2.min';
import { picture_getPictureList, picture_getPosterList } from '@api/user';
import vueQr from 'vue-qr';
import { Button, Toast } from 'vant';

export default {
  components: {
    'van-button': Button,
    vueQr
  },
  data() {
    return {
      swiperList: [],
      copyLink: '',
      base64: '',
      qrcode: '',
      mySwiper: null
    };
  },
  created() {
    this.copyLink = `${location.origin}${this.$router.options.base}invitation?shareId=${this.userInfo.id}`;
  },
  mounted() {
    this.wxJssdk.wxShare({
      title: 'Hi，朋友，为您推荐一款一站式企业服务平台，让您的企业经营更简单',
      desc: '我一直在用腾云企服，想邀请您来一起体验',
      link: this.copyLink,
      imgUrl: 'https://tyqf-bucket.oss-cn-beijing.aliyuncs.com/other/custCenterLogo.jpg'
    });
    this.initSwiper();
    this.getPosterList();
  },
  methods: {
    initSwiper() {
      let _this = this;
      this.mySwiper = new Swiper(this.$refs.swiperBox, {
        autoplay: false,
        observer: true,
        observeParents: true,
        spaceBetween: 15,
        effect: 'coverflow',
        slidesPerView: 1.4,
        centeredSlides: true,
        coverflow: {
          rotate: 25,
          stretch: 10,
          depth: 60,
          modifier: 2,
          slideShadows: false
        },
        onSlideChangeStart: function(swiper) {
          if (!_this.swiperList[swiper.activeIndex].canvasImg) {
            swiper.lockSwipeToNext();
          }
        },
        onSlideChangeEnd: function(swiper) {
          if (!_this.swiperList[swiper.activeIndex].canvasImg) {
            _this.draw(swiper.activeIndex);
          }
        }
      });
      // this.mySwiper.lockSwipes();
    },
    draw(index) {
      this.$loading.show();
      let imgs = [this.swiperList[index].bgImg, this.qrcode];
      let promiseAll = [];
      imgs.forEach((item, k) => {
        promiseAll[k] = new Promise((resolve, reject) => {
          let img = new Image();
          if (k === 0) {
            img.crossOrigin = 'anonymous';
          }
          img.src = item;
          img.onload = () => {
            resolve(img);
          };
        });
      }); //确保图片加载完毕
      Promise.all(promiseAll).then(img => {
        console.log('1112');
        let canvas = document.createElement('canvas');
        let ctx = canvas.getContext('2d');
        let scale = 2;
        let codeWidth = document.querySelector('.swiper-slide-active').querySelector('.qr-code').offsetWidth * scale;
        canvas.width = document.querySelector('.swiper-slide-active').querySelector('.bg-img').offsetWidth * scale;
        canvas.height = document.querySelector('.swiper-slide-active').querySelector('.bg-img').offsetHeight * scale;
        ctx.fillStyle = '#fff';
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        ctx.drawImage(img[0], 0, 0, canvas.width, canvas.height); //背景图
        ctx.fillStyle = '#ffffff';
        ctx.fillRect(canvas.width - codeWidth - 50, canvas.height - codeWidth - 50, codeWidth + 20, codeWidth + 20); //二维码白色背景
        ctx.drawImage(img[1], canvas.width - codeWidth - 40, canvas.height - codeWidth - 40, codeWidth, codeWidth); //二维码
        this.base64 = canvas.toDataURL('image/jpeg');
        this.swiperList[index].canvasImg = canvas.toDataURL('image/jpeg');
        this.$nextTick(() => {
          this.mySwiper.unlockSwipes();
        });
        this.$loading.hide();
      });
    },
    async getPosterList() {
      let res = null;
      if (this.$route.query.pictureId) {
        res = await picture_getPosterList({ pictureId: this.$route.query.pictureId });
      } else {
        res = await picture_getPictureList({ type: 3 });
      }
      if (res.code === 200) {
        this.swiperList = res.data.map(item => {
          return {
            bgImg: item.pictureUrl,
            canvasImg: ''
          };
        });
        setTimeout(() => {
          this.qrcode = document.querySelector('.qrCode').src;
          this.draw(0);
        }, 800);
      } else {
        Toast(res.msg);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.bg {
  width: 100%;
}
.share-tip {
  position: relative;
  padding: 40px 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  ul {
    li {
      line-height: 48px;
      font-size: 28px;
      color: #171717;
      &:before {
        position: relative;
        top: -5px;
        display: inline-block;
        content: '';
        width: 10px;
        height: 10px;
        margin-right: 12px;
        border-radius: 50%;
        background: #999;
      }
    }
  }
}
.canvas_img {
  width: 100%;
}
.poster_wrapper {
  text-align: center;
  position: relative;
  min-height: 50vh;
  .bg-img {
    width: 100%;
  }
  .qr-code-container {
    background: #fff;
    width: 120px;
    height: 120px;
    padding: 10px;
    position: absolute;
    bottom: 35px;
    right: 30px;
    box-sizing: border-box;
  }
  .qr-code {
    width: 100px;
  }
}
</style>
